<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.82.0">
    <title>疫情实时监控系统</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/carousel/">
    <script src="js/echarts.js"></script>
    <script src="js/china.js"></script>
    <script src="webjars/jquery/3.6.0/jquery.min.js"></script>
    <script src="webjars/jquery/3.6.0/jquery.js"></script>

    <script type="text/javascript">

        //<!--      滚动到指定的查询页面-->
        function scrollWindow() {
            window.scrollTo(100, 800);
        }

        function doit() {

            var targetUrl = $("#addForm").attr("action");
            var data = $("#addForm").serialize();

            $.ajax({
                type: 'post',
                url: targetUrl,
                cache: false,
                data: data,  //重点必须为一个变量如：data
                async: false,
                dataType: 'json',
                success: function (data) {
                    //console.log(data.confirmed);
                    var confirmed = data["confirmed"];
                    //console.log(confirmed);

                    if (confirmed === -100) {
                        alert("请正确选择！！！");
                        return;
                    } else if (confirmed >= 0 && confirmed <= 2) {
                        $('.box').append("<style>.box:after{\n" +
                            "  background:linear-gradient(235deg,#0AFF00,#0AFF00,#0AFF00);\n" +
                            "}</style>");
                        alert("该地区为低风险地区，" + "现存确诊人数为" + confirmed + "人");
                    } else if (confirmed <= 8) {
                        $('.box').append("<style>.box:after{\n" +
                            "  background:linear-gradient(235deg,#FFC800,#FFC800,#FFC800);\n" +
                            "}</style>");
                        alert("该地区为中风险地区，" + "现存确诊人数为" + confirmed + "人,请注意防护！");
                    } else if (confirmed >= 9) {
                        $('.box').append("<style>.box:after{\n" +
                            "  background:linear-gradient(235deg,#EE0000,#EE0000,#EE0000);\n" +
                            "}</style>");
                        alert("该地区风险较高，" + "现存确诊人数为" + confirmed + "人,出行请注意防护！");
                    } else {
                        alert("请正确选择！！！");
                        location.reload(); //错误操作 刷新页面并跳转到指定位置
                        $('#div1')[0].scrollIntoView(true);
                        return;
                    }
                },
                error: function () {
                    alert("请正确选择！")
                }
            })
        }

        function dothat() {
            var data = $("#addForm").serialize();
            console.log(data);
            $.ajax({
                type: 'post',
                url: 'getAreaDetail',
                cache: false,
                data: data,  //重点必须为一个变量如：data
                async: false,
                dataType: 'json',
                success: function (dataform) {
                    //console.log(dataform.currentConfirmedCount);
                    //console.log(dataform.provinceCity);
                    var chartDom = document.getElementById('areaDetail');
                    var myChart = echarts.init(chartDom);
                    var option;

                    option = {
                        title: {
                            text: '该地区详情',
                            left: 'center',
                            textStyle: {}
                        },
                        color: ['#AE212C', '#EE6666', '#FAC858', '#91CC75', '#5D7092'],
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '10%',
                            data: ['累计确诊', '现存确诊', '疑似确诊', '治愈', '死亡'],
                            left: 'center'
                        },
                        series: [
                            {
                                name: '该地区',
                                type: 'pie',
                                radius: ['47%', '70%'],
                                top: '10%',
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    normal: {
                                        show: false,
                                        position: 'center',
                                        formatter: '{b}\n{c}人',
                                        textStyle: {
                                            fontSize: '30',
                                            fontweight: 'bold',
                                        }
                                    }
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '30',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    {value: 98, name: '累计确诊'},
                                    {value: 7, name: '现存确诊'},
                                    {value: 0, name: '疑似确诊'},
                                    {value: 91, name: '治愈'},
                                    {value: 0, name: '死亡'}
                                ]
                            }
                        ]
                    },

                        option.title.text = dataform.provinceCity + '详情\n  ';
                    option.series[0].name = dataform.provinceCity;
                    option.series[0].data[0].value = dataform.confirmedCount;
                    option.series[0].data[1].value = dataform.currentConfirmedCount;
                    option.series[0].data[2].value = dataform.suspectedCount;
                    option.series[0].data[3].value = dataform.curedCount;
                    option.series[0].data[4].value = dataform.deadCount;

                    option && myChart.setOption(option);
                }
            })
        }
    </script>

    <!-- Bootstrap core CSS -->
    <link href="/webjars/bootstrap/5.0.0-beta3/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        /*默认长宽比0.75*/
        .center {
            margin: auto;
            width: 70%;
        }

        #lll {
            width: 700px;
        }

        .time {
            position: absolute;
            right: 20px;
            top: 5px;
            font-size: 20px;
            color: black;
        }

        .box {
            position: relative;
            width: 350px;
            height: 530px;
            right: 0;
            /*display: flex;*/
            justify-content: center;
            align-items: center;
            background: white;
        }

        .box:before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: #fff;
            z-index: -1;
        }

        .box:after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: #fff;
            z-index: -2;
            filter: blur(45px);
        }

        .box:before,
        .box:after {
            /*#FF6C00红色     */
            background: linear-gradient(235deg, #cce5ff, #cce5ff, #cce5ff);
        }

        .content {
            padding: 20px;
            box-sizing: border-box;
            color: #fff;

        }

    </style>


    <!-- Custom styles for this template -->
    <link href="css/carousel.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
    function showTime() {
        var time = new Date();
        var year = time.getFullYear();
        var month = (time.getMonth() + 1 + '').padStart(2, '0');
        var day = (time.getDate() + '').padStart(2, '0');
        var hour = (time.getHours() + '').padStart(2, '0');
        var minute = (time.getMinutes() + '').padStart(2, '0');
        var second = (time.getSeconds() + '').padStart(2, '0');

        var content = `${year}年${month}月${day}日${hour}:${minute}:${second}`;
        $('#timeMethod').text(content);
    }

    showTime();
    setInterval(showTime, 1000);
</script>
<header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
        <div class="container-fluid">
            <a class="navbar-brand" href="https://blog.csdn.net/weixin_45362837" target="_blank">Krystal1</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto mb-2 mb-md-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="https://ncov.dxy.cn/ncovh5/view/pneumonia"
                           target="_blank">丁香园</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active"
                           href="http://krystaljungen.gitee.io/my-krystal2"
                           target="_blank">中国</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active"
                           href=" http://krystaljungen.gitee.io/my-krystal1"
                           target="_blank">| 世界</a>
                    </li>
                    <li class="nav-item" id="lll">
                        <span style="color: white;font-size: 30px;margin-left: 380px">实时疫情大数据平台</span>
                    </li>
                    <li class="nav-item"><span class="time" id="timeMethod" style="color: white"></span></li>

                </ul>

            </div>

        </div>
    </nav>
</header>

<main>

    <div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-indicators">
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true"
                    aria-label="Slide 1"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
            <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
        </div>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
                     aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false">
                    <rect width="100%" height="100%" fill="#777"/>
                </svg>
                <img src="/img/疫情素材01.jpg"/>
                <div class="container">
                    <div class="carousel-caption text-start">
                        <h1>Current Situation in China</h1>

                        <p><a class="btn btn-lg btn-primary"
                              href="http://krystaljungen.gitee.io/my-krystal2" target="_blank">Go
                            to</a></p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
                     aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false">
                    <rect width="100%" height="100%" fill="#777"/>
                </svg>
                <img src="/img/疫情素材02.jpg"/>
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Current Situation in World</h1>
                        <p><a class="btn btn-lg btn-primary"
                              href="http://krystaljungen.gitee.io/my-krystal2"
                              target="_blank">Go to</a></p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"
                     aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false">
                    <rect width="100%" height="100%" fill="#777"/>
                </svg>
                <img src="/img/疫情素材03.jpg"/>
                <div class="container">
                    <div class="carousel-caption text-end">
                        <h1>Select your city right now!</h1>
                        <p><a class="btn btn-lg btn-primary" href="#" onclick="scrollWindow()">Go Selecting</a></p>
                    </div>
                </div>
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
    </div>


    <!-- Marketing messaging and featurettes
    ================================================== -->
    <!-- Wrap the rest of the page in another container to center all the content. -->

    <div class="container marketing">

        <!-- Three columns of text below the carousel -->
        <div class="row" id="covid_all">
            <span style="left: 0px;color: black;font-weight: bold">国内疫情总览:</span>
            <table class="table table-bordered" bgcolor="#b0e0e6" width="80%">
                <thead>
                <tr>
                    <th>
                        时间
                    </th>
                    <th>
                        现存确诊
                    </th>
                    <th>
                        累计确诊
                    </th>
                    <th>
                        现存疑似
                    </th>
                    <th>
                        累计治愈
                    </th>
                    <th>
                        累计死亡
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td id="datetime" style="font-weight: bolder">1</td>
                    <td id="currentConfirmedCount" style="color: #F74C31;font-weight: bolder">1</td>
                    <td id="confirmedCount" style="color: #AE212C;font-weight: bolder">1</td>
                    <td id="suspectedCount" style="color:#050C0D;font-weight: bolder">1</td>
                    <td id="curedCount" style="color:#28B7A3;font-weight: bolder">1</td>
                    <td id="deadCount" style="color:#5D7092;font-weight: bolder">1</td>
                </tr>
                </tbody>
            </table>
            <script type="text/javascript">
                /*--------------------全国统计数据-----------------------------*/
                $.getJSON("http://121.4.30.238:9000/covid/getNationalData", function (data) {
                    var map = data.data
                    $("#datetime").html(map.datetime)
                    $("#currentConfirmedCount").html(map.currentConfirmedCount)
                    $("#confirmedCount").html(map.confirmedCount)
                    $("#suspectedCount").html(map.suspectedCount)
                    $("#curedCount").html(map.curedCount)
                    $("#deadCount").html(map.deadCount)
                })
            </script>
        </div><!-- /.row -->


        <!-- START THE FEATURETTES -->

        <hr class="featurette-divider">

        <div id="firstEle" style="width: 1300px;height: 600px;">
            <br/>
            <br/>

            <!--      第一个图-->
            <div id="map_all" style="width: 800px;height:550px;float: left;">
                <script type="text/javascript">
                    /*--------------------全国地图-----------------------------*/
                    var dataList = [
                        {name: '北京', value: 100},
                        {name: '南海诸岛', value: 0},
                        {name: '上海', value: randomValue()}
                    ]
                    var myMapChart = echarts.init(document.getElementById('map_all'));

                    function randomValue() {
                        return Math.round(Math.random() * 1000);
                    }

                    myMapChart.setOption({
                        title: {
                            text: '全国疫情地图'
                        },
                        tooltip: {
                            formatter: function (params, ticket, callback) {
                                return params.seriesName + '<br />' + params.name + '：' + params.value
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 1500,
                            left: 'left',
                            top: 'bottom',
                            text: ['多', '少'],
                            inRange: {
                                color: ['#ffe5bf', '#ffa372', '#ff7e86', '#ee1216', '#B22222']
                            },
                            show: true
                        },
                        geo: {
                            map: 'china',
                            roam: false,//不开启缩放和平移
                            zoom: 1.23,//视角缩放比例
                            label: {
                                normal: {
                                    show: true,
                                    fontSize: '10',
                                    color: 'rgba(0,0,0,0.7)'
                                }
                            },
                            itemStyle: {
                                normal: {
                                    borderColor: 'rgba(0, 0, 0, 0.2)'
                                },
                                emphasis: {
                                    areaColor: '#AEEEEE',//鼠标悬停区域颜色
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 0,
                                    shadowBlur: 20,
                                    borderWidth: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        },
                        series: [
                            {
                                name: '现存确诊',
                                type: 'map',
                                geoIndex: 0,
                                data: dataList

                            }
                        ]
                    });

                    myMapChart.on('click', function (params) {
                        alert(params.name);
                    });

                    setTimeout(function () {
                        // 异步加载json格式数据
                        $.getJSON('http://121.4.30.238:9000/covid/getNationalMapData', function (data) {
                            myMapChart.setOption({
                                series: [{
                                    data: data.data
                                }]
                            });
                        });
                    }, 1000)
                </script>
            </div>

            <div class="box" id="div1" style="float: right">
                <div class="content">
                    <h3 style="color: black;" align="center">查询目标位置疫情状况</h3>
                    <form id="addForm" action="selectCondition" method="post">
                        <select id="province" name="provinceShortName">
                            <option value="-1">请选择</option>
                        </select>
                        <select id="city" name="cityName">
                            <option value="-1">请选择</option>
                        </select>
                        <!--             onclick=" -->
                        <!--            <input type="submit"  value="提交" onclick="jisnbisn();"/>-->
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button" id="submitAdd" class="btn btn-info" onclick="doit();dothat();">查询</button>

                    </form>
                    <br/>
                    <div style="width: 340px;height: 400px;float: left" id="areaDetail"></div>
                    <script type="text/javascript">
                        window.onload = function () {
                            var chartDom = document.getElementById('areaDetail');
                            var myChart = echarts.init(chartDom);
                            var option;

                            option = {
                                title: {
                                    text: '中国地区详情\n',
                                    left: 'center',
                                    textStyle: {}
                                },
                                color: ['#AE212C', '#EE6666', '#FAC858', '#91CC75', '#5D7092'],
                                tooltip: {
                                    trigger: 'item'
                                },
                                legend: {
                                    top: '10%',
                                    data: ['累计确诊', '现存确诊', '疑似确诊', '治愈', '死亡'],
                                    left: 'center'
                                },
                                series: [
                                    {
                                        name: '中国',
                                        type: 'pie',
                                        radius: ['47%', '70%'],
                                        top: '10%',
                                        avoidLabelOverlap: false,
                                        itemStyle: {
                                            borderRadius: 10,
                                            borderColor: '#fff',
                                            borderWidth: 2
                                        },
                                        label: {
                                            normal: {
                                                show: false,
                                                position: 'center',
                                                formatter: '{b}\n{c}人',
                                                textStyle: {
                                                    fontSize: 30,
                                                    fontweight: 'bold',
                                                }
                                            }
                                        },
                                        emphasis: {
                                            label: {
                                                show: true,
                                                fontSize: '30',
                                                fontWeight: 'bold'
                                            }
                                        },
                                        labelLine: {
                                            show: false
                                        },
                                        data: [
                                            {value: 98, name: '累计确诊'},
                                            {value: 7, name: '现存确诊'},
                                            {value: 2, name: '疑似确诊'},
                                            {value: 91, name: '治愈'},
                                            {value: 1, name: '死亡'}
                                        ]
                                    }
                                ]
                            }
                            myChart.setOption(option);
                            $.getJSON('http://121.4.30.238:9000/covid/getChinaData', function (data) {
                                option.series[0].data[0].value = data.confirm;
                                option.series[0].data[1].value = data.nowConfirm;
                                option.series[0].data[2].value = data.suspect;
                                option.series[0].data[3].value = data.heal;
                                option.series[0].data[4].value = data.dead;
                                myChart.setOption(option);
                            })

                        };


                    </script>

                    <script type="text/javascript">
                        function jisnbisn() {
                            $('.box').append("<style>.box:after{\n" +
                                "  background:linear-gradient(235deg,#FFD700,#FF6347,#00FF00);\n" +
                                "}</style>");
                            //document.styleSheets[0].insertRules('.box:after{background:linear-gradient(235deg,#FFD700,#FF6347,#blue)}',0);
                        }


                        //省份短名
                        const provinceList = ['上海', '云南', '广东', '台湾', '福建', '香港', '澳门', '四川', '陕西', '海南', '浙江', '北京', '江苏', '天津', '山西', '湖北', '河南',
                            '山东', '重庆', '湖南', '内蒙古', '广西', '甘肃', '黑龙江', '河北', '安徽', '新疆', '江西', '吉林', '辽宁', '贵州', '宁夏', '青海', '西藏'
                        ];
                        //直辖市下的区县或者省份下面的市区
                        const cityList = [
                            ['境外输入', '外地来沪', '浦东新区', '宝山区', '黄浦区', '闵行区', '徐汇区', '静安区', '松江区', '长宁区', '普陀区', '杨浦区', '嘉定区', '奉贤区', '虹口区', '青浦区', '金山区', '崇明区', '境外来沪'],
                            ['德宏州', '境外输入', '昆明', '昭通', '西双版纳', '玉溪', '曲靖', '大理州', '红河州', '保山', '丽江', '普洱', '楚雄州', '文山州', '临沧'],
                            ['广州', '深圳', '佛山', '肇庆', '清远', '珠海', '东莞', '中山', '惠州', '湛江', '江门', '汕头', '梅州', '茂名', '阳江', '揭阳', '韶关', '潮州', '汕尾', '河源'],
                            ['台湾'],
                            ['境外输入人员', '福州', '莆田', '泉州', '厦门', '宁德', '漳州', '南平', '三明', '龙岩'],
                            ['香港'],
                            ['澳门'],
                            ['成都', '甘孜州', '达州', '南充', '广安', '泸州', '巴中', '绵阳', '内江', '德阳', '遂宁', '攀枝花', '凉山州', '宜宾', '自贡', '眉山', '雅安', '广元', '资阳', '乐山', '阿坝州'],
                            ['境外输入', '西安', '安康', '汉中', '咸阳', '渭南', '宝鸡', '延安', '铜川', '商洛', '榆林', '韩城', '杨凌'],
                            ['海口', '三亚', '儋州', '万宁', '澄迈', '昌江', '琼海', '临高', '陵水', '定安', '文昌', '东方', '保亭', '乐东', '琼中'],
                            ['境外输入', '温州', '杭州', '宁波', '台州', '金华', '嘉兴', '绍兴', '省十里丰监狱', '丽水', '衢州', '湖州', '舟山'],
                            ['境外输入', '丰台区', '大兴区', '海淀区', '朝阳区', '西城区', '顺义区', '昌平区', '外地来京', '通州区', '房山区', '东城区', '石景山区', '怀柔区', '密云区', '门头沟区', '延庆区', '待明确地区'],
                            ['境外输入', '南京', '苏州', '徐州', '淮安', '无锡', '常州', '连云港', '南通', '泰州', '盐城', '扬州', '宿迁', '镇江'],
                            ['境外输入', '宝坻区', '河东区', '滨海新区', '河北区', '北辰区', '南开区', '和平区', '外地来津', '东丽区', '宁河区', '河西区', '西青区', '武清区', '红桥区', '津南区'],
                            ['境外输入', '晋中', '太原', '运城', '大同', '晋城', '长治', '朔州', '忻州', '吕梁', '阳泉', '临汾'],
                            ['武汉', '孝感', '黄冈', '荆州', '鄂州', '随州', '襄阳', '黄石', '宜昌', '荆门', '咸宁', '十堰', '仙桃', '天门', '恩施州', '潜江', '神农架林区'],
                            ['境外输入', '信阳', '郑州', '南阳', '驻马店', '商丘', '周口', '平顶山', '新乡', '安阳', '许昌', '漯河', '焦作', '洛阳', '开封', '鹤壁', '濮阳', '三门峡', '济源'],
                            ['境外输入', '济宁', '青岛', '临沂', '济南', '烟台', '潍坊', '威海', '聊城', '德州', '泰安', '淄博', '枣庄', '菏泽', '日照', '滨州'],
                            ['境外输入', '万州区', '江北区', '云阳县', '合川区', '綦江区', '长寿区', '奉节县', '九龙坡区', '开州区', '忠县', '渝中区', '垫江县', '潼南区', '渝北区', '两江新区', '南岸区', '石柱县', '大足区', '巫溪县', '铜梁区', '丰都县', '巫山县', '沙坪坝区', '璧山区', '荣昌区', '大渡口区', '巴南区', '涪陵区', '永川区', '江津区', '梁平区', '高新区', '黔江区', '城口县', '彭水县', '武隆区', '秀山县', '酉阳县', '万盛经开区'],
                            ['境外输入', '长沙', '岳阳', '邵阳', '常德', '株洲', '娄底', '益阳', '衡阳', '永州', '怀化', '郴州', '湘潭', '湘西自治州', '张家界'],
                            ['境外输入人员', '呼伦贝尔', '鄂尔多斯', '包头', '赤峰', '锡林郭勒盟', '巴彦淖尔', '呼和浩特', '通辽', '乌兰察布', '乌海市', '兴安盟'],
                            ['境外输入', '南宁', '北海', '桂林', '河池', '柳州', '防城港', '玉林', '来宾', '钦州', '贵港', '梧州', '贺州', '百色'],
                            ['境外输入', '兰州', '天水', '平凉', '定西', '甘南', '白银', '陇南', '庆阳', '临夏', '张掖', '金昌', '省级（湖北输入）'],
                            ['绥化', '哈尔滨', '境外输入', '双鸭山', '鸡西', '齐齐哈尔', '牡丹江', '大庆', '黑河', '七台河', '佳木斯', '鹤岗', '大兴安岭', '待明确', '伊春'],
                            ['保定', '石家庄', '邢台', '唐山', '沧州', '张家口', '境外输入', '廊坊', '邯郸', '秦皇岛', '衡水', '承德'],
                            ['合肥', '蚌埠', '阜阳', '亳州', '安庆', '六安', '宿州', '马鞍山', '芜湖', '铜陵', '淮北', '淮南', '池州', '滁州', '黄山', '宣城', '境外输入'],
                            ['乌鲁木齐', '喀什地区', '伊犁州', '兵团第四师', '昌吉州', '兵团第八师石河子市', '兵团第九师', '吐鲁番', '巴州', '兵团第十二师', '兵团第六师五家渠市', '兵团第七师', '阿克苏地区', '待明确地区'],
                            ['南昌', '新余', '上饶', '九江', '宜春', '赣州', '抚州', '萍乡', '吉安', '鹰潭', '境外输入', '景德镇', '赣江新区'],
                            ['通化', '长春', '吉林市', '四平', '辽源', '延边', '公主岭', '松原', '梅河口', '白城'],
                            ['大连', '境外输入', '沈阳', '锦州', '葫芦岛', '丹东', '盘锦', '阜新', '铁岭', '朝阳', '鞍山', '本溪', '辽阳', '营口', '抚顺'],
                            ['贵阳', '遵义', '毕节', '黔南州', '六盘水', '铜仁', '黔东南州', '安顺', '黔西南州', '境外输入'],
                            ['银川', '吴忠', '固原', '中卫', '宁东', '石嘴山'],
                            ['西宁', '海北州'],
                            ['拉萨']
                        ];
                        // const countryList = [[['黄浦区', '浦东区']],
                        //     [['和平区', '浑南区'], ['中山区', '沙河口区']],
                        //     [['南岗区', '松北区'], ['龙凤区', '萨尔图区'], ['建华区', '龙沙区']]];

                        // 创建下拉菜单。（向下拉菜单中添加option）
                        // 这里传进来的obj 就是各个<select>的Element
                        function creatOption(obj, data) {
                            for (var i in data) {
                                var op = new Option(data[i], i);
                                obj.options.add(op);
                            }
                        }


                        // 获取各个下拉菜单的元素对象
                        var province = document.getElementById('province');
                        var city = document.getElementById("city");
                        //var country = document.getElementById('country');

                        // 首先要有省份
                        creatOption(province, provinceList);
                        // 在省份发生变化的时候，city也要跟着发生改变
                        province.onchange = function () {
                            // 清空city下面的原有选项
                            city.options.length = 0;
                            //country.options.length = 0;
                            if (province.value >= 0) {
                                creatOption(city, cityList[province.value]);
                            }

                        }
                        // 在city发生变化时，country也会随之发生变化
                        // city.onchange = function (){
                        //     country.options.length = 0;
                        //     if(province.value>=0 && city.value>=0){
                        //         creatOption(country,countryList[province.value][city.value]);
                        //     }
                        // }

                    </script>
                </div>
            </div>

        </div>

        <hr class="featurette-divider">

        <div class="center col-lg-12" id="time_line" style="width: 1300px;height:600px;">
            <script>
                /*--------------------时间趋势折线图-----------------------------*/
                var myLineChart = echarts.init(document.getElementById("time_line"));
                myLineChart.setOption({
                    title: {
                        text: '疫情趋势（2020-01-19至今）'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['新增确诊', '累计确诊', '疑似病例', '累计治愈', '累计死亡']
                    },
                    dataset: {
                        // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                        dimensions: ['dateId', '新增确诊', '累计确诊', '疑似病例', '累计治愈', '累计死亡'],
                        source: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    },
                    yAxis: {
                        min: 0,
                        type: 'value'
                    },
                    series: [
                        {type: 'line'},
                        {type: 'line'},
                        {type: 'line'},
                        {type: 'line'},
                        {type: 'line'}
                    ]
                });


                var xdata02 = [];//x轴
                $.getJSON('http://121.4.30.238:9000/covid/getCovidTimeData', function (data) {
                    var arr = data.data
                    for (var i = 0; i < arr.length; i++) {
                        xdata02.push(arr[i].dateId)
                    }
                    myLineChart.setOption({
                        dataset: {
                            source: data.data
                        },
                        xAxis: {
                            data: xdata02
                        }
                    })
                })

            </script>

        </div>

        <hr class="featurette-divider">

        <span style="left: 0;color: black;font-weight: bolder;font-size: 30px">境外输入</span>
        <br>
        <br>
        <div class="center col-lg-12" style="width: 1300px;height:500px; left: 0;">

            <div id="import_pie" style="float: left;width: 600px;height:450px; left: 0;">
                <script>
                    /*--------------------境外输入饼图-----------------------------*/
                    var myPieChart = echarts.init(document.getElementById("import_pie"));
                    myPieChart.setOption({
                        title: {
                            text: '省市境外输入统计(前10)'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            type: 'scroll',
                            orient: 'vertical',
                            right: 10,
                            top: 20,
                            bottom: 20,
                        },
                        series: [
                            {
                                name: '境外输入',
                                type: 'pie',    // 设置图表类型为饼图
                                radius: '70%',  // 饼图的半径
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                data: []        // 数据数组，name 为数据项名称，value 为数据项值]
                            }
                        ]
                    })
                    $.getJSON('http://121.4.30.238:9000/covid/getCovidImportData', function (data) {
                        myPieChart.setOption({
                            series: [{
                                data: data.data
                            }]
                        })
                    })
                </script>
            </div>

            <!--      境外输入趋势-->
            <div id="import_line" style="float: right;width: 650px;height:450px; right: 0;">
                <script>
                    /*--------------------境外输入趋势折线图-----------------------------*/
                    var myLineChart03 = echarts.init(document.getElementById("import_line"));
                    myLineChart03.setOption({
                        title: {
                            text: '全国境外输入趋势（近一个月）'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['累计境外输入']
                        },
                        dataset: {
                            // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                            dimensions: ['date', '累计境外输入'],
                            source: []
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {type: 'line'},
                        ]
                    });


                    var xdata03 = [];//x轴
                    $.getJSON('http://121.4.30.238:9000/covid/getCovidImportChina', function (data) {
                        var arr = data.data
                        for (var i = 0; i < arr.length; i++) {
                            xdata03.push(arr[i].date)
                        }
                        myLineChart03.setOption({
                            dataset: {
                                source: data.data
                            },
                            xAxis: {
                                data: xdata03
                            }
                        })
                    })

                </script>


            </div>
        </div>
        <hr class="featurette-divider">


    </div><!-- /.container -->
    <!--    新增趋势-->
    <div class="center col-lg-12" id="incr_line" style="width: 1300px;height:600px;">
        <script>
            var myLineChart02 = echarts.init(document.getElementById("incr_line"));
            myLineChart02.setOption({
                title: {
                    text: '新增趋势(近一个月)'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['新增确诊', '新增死亡', '新增治愈', '新增疑似']
                },
                dataset: {
                    // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。
                    dimensions: ['datetime', '新增确诊', '新增死亡', '新增治愈', '新增疑似'],
                    source: []
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: []
                },
                yAxis: {
                    min: 0,
                    type: 'value'
                },
                series: [
                    {type: 'line'},
                    {type: 'line'},
                    {type: 'line'},
                    {type: 'line'},
                ]
            });


            var xdata2 = [];//x轴
            $.getJSON('http://121.4.30.238:9000/covid/getCovidIncr', function (data) {
                var arr = data.data
                for (var i = 0; i < arr.length; i++) {
                    xdata2.push(arr[i].datetime)

                }
                myLineChart02.setOption({
                    dataset: {
                        source: data.data
                    },
                    xAxis: {
                        data: xdata2
                    }
                })
            })

        </script>


    </div>

    <hr class="featurette-divider">

    <div class="center col-lg-12" style="width: 1300px;height:500px;position:relative;">
        <div style="left: 0"><span style="color: black;font-weight: bolder;font-size: 30px;">疫苗接种信息</span></div>

        <div style="width: 500px;height: 350px;top:10px;float: left" id="vaccinationsMain01"></div>

        <div style="width: 600px;height: 350px;top:10px;float: right" id="vaccinationsMain02"></div>
        <table bgcolor="#F1F8F4" width="150px">
            <thead>
            <tr>
                <th style="text-align: center">
                    全球累计接种
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td id="worldVac" style="font-weight: bolder;color: #178B50;text-align: center">12356</td>
            </tr>
            </tbody>
        </table>
        <br>
        <table bgcolor="#F1F8F4" width="150px">
            <thead>
            <tr>
                <th style="text-align: center">
                    中国累计接种
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td id="chinaVac" style="font-weight: bolder;color: #178B50;text-align: center">200</td>
            </tr>
            </tbody>
        </table>
        <div style="top: 400px;left:0px;width: 600px;height: 100px;position:absolute; ">
            <div>数据说明：</div>
            <div>1.中国数据来源于国家卫健委。</div>
            <div>2.数据口径为接种剂次，而非接种人数。目前上市疫苗普遍需接种两个剂次。</div>
        </div>

        <script type="text/javascript">

            var ChinaTotal_vaccinations;
            var ChinaTotal_vaccinations_per_hundred;
            var WorldTotal_vaccinations;
            var WorldTotal_vaccinations_per_hundred;

            function getData() {
                $.ajax({
                    type: 'get',
                    url: 'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=VaccineTopData',
                    data: {
                        modules: 'VaccineTopData'
                    },
                    dataType: 'json',
                    success: function (res) {
                        ChinaTotal_vaccinations = res.data.VaccineTopData.中国.total_vaccinations;
                        ChinaTotal_vaccinations_per_hundred = res.data.VaccineTopData.中国.total_vaccinations_per_hundred;
                        WorldTotal_vaccinations = res.data.VaccineTopData.全球.total_vaccinations;
                        WorldTotal_vaccinations_per_hundred = res.data.VaccineTopData.全球.total_vaccinations_per_hundred;
                        // console.log(ChinaTotal_vaccinations);
                        // console.log(ChinaTotal_vaccinations_per_hundred);
                        // console.log(WorldTotal_vaccinations);
                        // console.log(WorldTotal_vaccinations_per_hundred);
                        $("#worldVac").html(WorldTotal_vaccinations + "剂次");
                        $("#chinaVac").html(ChinaTotal_vaccinations + "剂次");
                        leftDetail(ChinaTotal_vaccinations, WorldTotal_vaccinations);
                        rightDetail(ChinaTotal_vaccinations_per_hundred, WorldTotal_vaccinations_per_hundred);
                    }
                });
            }

            getData();

            function leftDetail(china, world) {
                var charDom = document.getElementById('vaccinationsMain01');
                var myChart = echarts.init(charDom);
                option = {
                    title: {
                        text: '全球疫苗接种信息',
                        //subtext: 'by Krystal',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}：{c}剂'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: china, name: '中国接种'},
                                {value: world - china, name: '海外接种'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            }

            function rightDetail(chinaPercent, worldPercent) {
                var chartDom1 = document.getElementById('vaccinationsMain02');
                var myChart1 = echarts.init(chartDom1);
                var option;

                var spirit = 'image://';

                var maxData = 100;

                option = {
                    title: {
                        text: '每百人接种率',
                        left: 'center'
                    },
                    tooltip: {
                        formatter: '{b}每百人接种率: {c}%'
                    },
                    xAxis: {
                        max: maxData,
                        splitLine: {show: false},
                        offset: 10,
                        axisLine: {
                            lineStyle: {
                                color: '#999'
                            }
                        },
                        axisLabel: {
                            margin: 10
                        }
                    },
                    yAxis: {
                        data: ['中国', '全球'],
                        inverse: true,
                        axisTick: {show: false},
                        axisLine: {show: false},
                        axisLabel: {
                            margin: 10,
                            color: '#999',
                            fontSize: 16
                        }
                    },
                    grid: {
                        top: 'center',
                        height: 200,
                        left: 70,
                        right: 100
                    },
                    series: [{
                        // current data
                        type: 'pictorialBar',
                        symbol: spirit,
                        symbolRepeat: 'fixed',
                        symbolMargin: '5%',
                        symbolClip: true,
                        symbolSize: 30,
                        symbolBoundingData: maxData,
                        data: [chinaPercent, worldPercent],
                        markLine: {
                            symbol: 'none',
                            label: {
                                formatter: 'max: {c}%',
                                position: 'start'
                            },
                            lineStyle: {
                                color: 'green',
                                type: 'dotted',
                                opacity: 0.2,
                                width: 2
                            },
                            data: [{
                                type: 'max'
                            }]
                        },
                        z: 10
                    }, {
                        // full data
                        type: 'pictorialBar',
                        itemStyle: {
                            normal: {
                                opacity: 0.2
                            }
                        },
                        label: {
                            show: true,
                            formatter: function (params) {
                                return params.value + ' %';
                            },
                            position: 'right',
                            offset: [10, 0],
                            color: 'green',
                            fontSize: 18
                        },
                        animationDuration: 0,
                        symbolRepeat: 'fixed',
                        symbolMargin: '5%',
                        symbol: spirit,
                        symbolSize: 30,
                        symbolBoundingData: maxData,
                        data: [chinaPercent, worldPercent],
                        z: 5
                    }]
                };

                option && myChart1.setOption(option);
            }
        </script>
    </div>
    <hr>
    <!-- FOOTER -->
    <footer class="container">
        <button type="button" class="btn btn-primary float-end"><a href="#" style="color: black;text-decoration: none;">Back
            to top</a></button>
        <!--    <p class="float-end"><a href="#">Back to top</a></p>-->
        <p>&copy; 2021 By Krystal(秀秀) <a href="https://ncov.dxy.cn/ncovh5/view/pneumonia">&nbsp;&nbsp;&nbsp;&nbsp;数据来源：
            丁香园</a> &middot; <a
                href="https://news.qq.com/zt2020/page/feiyan.htm?from=timeline&isappinstalled=0#/">腾讯新闻</a></p>
    </footer>
</main>


<script src="/webjars/bootstrap/5.0.0-beta3/js/bootstrap.bundle.min.js"></script>


</body>
</html>
